<template>
  <div>
    <zm-panel title="选择适用影片" :visible.sync="value" @change="close">
      <zm-form :model="searchForm" ref="searchForm" inline class="mt10">
        <zm-form-item prop="filmName">
          <zm-input
            class="w200"
            v-model="searchForm.filmName"
            placeholder="请输入影片名称查询"
          ></zm-input>
        </zm-form-item>
        <zm-form-item prop="filmCode">
          <zm-input
            class="w200"
            v-model="searchForm.filmCode"
            placeholder="请输入影片编码查询"
          ></zm-input>
        </zm-form-item>
        <zm-form-item>
          <zm-button t="search" @click="onSearch"></zm-button>
        </zm-form-item>
      </zm-form>

      <zm-table-data
        ref="zm-table"
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
        :mutilple="true"
        pk="filmCode"
        :checked="selectedId"
      >
      </zm-table-data>
      <div slot="footer" class="tr">
        <zm-button @click="close" type="info">返回</zm-button>
        <zm-button @click="onReset" type="danger">重置</zm-button>
        <zm-button @click="onSave" type="primary">保存</zm-button>
      </div>
    </zm-panel>
  </div>
</template>
<script>
import tableMixin from '@/mixins/zmTableMixin'
import panelMixin from '@/mixins/panelMixin'
import cloudApis from '@/api/src/cloud'

export default {
  name: 'ChooseFilm',
  components: {},
  mixins: [panelMixin, tableMixin],
  props: {
    // 回填数据ID集合
    selectedId: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      searchForm: {
        filmName: '',
        filmCode: ''
      },
      columns: [
        {
          prop: 'filmName',
          label: '影片名称'
        },
        {
          prop: 'filmCode',
          label: '影片编号'
        },
        {
          prop: 'version',
          label: '制式'
        },
        {
          prop: 'publishDate',
          label: '上映时间'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    async loadList () {
      const _res = await cloudApis.getFilmPageList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    onReset () {
      this.tableParams.selectList.forEach(row => {
        this.$refs['zm-table'].toggleRow(row, false)
      })
      this.$refs['zm-table'].clearCacheData()
    },
    onSave () {
      this.$emit('handle-after', this.tableParams.selectList)
      this.close()
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
